import { homeAPI, DisplayQueue, DisplayQueueMember } from './hp_data.js';
import { Homepage_Card } from './hp_card';

export const VNS_callback = function (btn, btn_queue) {
    
}

const EL_KW_LIST = [];
export const EL_callback = function (btn, btn_queue) {
    let btn_kw_str = btn.querySelector(".filter-btn-text").innerText;
    if(btn.classList.contains("active")) {
        btn.classList.remove("active");
        console.log(`EL button\: \"${btn_kw_str}\" was filtered out.`);
        EL_KW_LIST.push(btn_kw_str);
    } else {
        btn.classList.add("active");
        console.log(`EL button\: \"${btn_kw_str}\" was reactivated.`);
        EL_KW_LIST.splice(EL_KW_LIST.indexOf(btn_kw_str), 1);
    }

    // console.log(EL_KW_LIST);
    let result;
    // console.log(result = homeAPI(EL_KW_LIST, false, true).print());
    create_display(result);
}

// card_display_nodeList.forEach((node, i, nodeList) => {
//     node.querySelector(".card-deck").innerHTML = "";
//     card_display_node.appendChild(node);
// });

// card_single_subList.forEach((card_subject, i, subList) => {
//     let card_deck_selector = `#${card_subject._get_aim_deck()} > .card-deck`;
//     let aim_card_deck = document.querySelector(card_deck_selector);
//     card_subject.appendTo(aim_card_deck);
// });

// create display
const create_display = function (display_queue = new DisplayQueue("new display set")) {
    let display_node_list = [];
    let VNS_tag = display_queue.get_next_tag("head") || "tag";
    let display_member;
    let card_display_single_node;
    while (VNS_tag !== "") {
        if(display_queue._queue[VNS_tag][1] < 0) {
            continue;
        }
        display_member = display_queue._queue[VNS_tag][0];
        card_display_single_node = create_single_display(display_member);
        display_node_list.push(card_display_single_node);

        VNS_tag = display_member.get_next_tag();
    }

    console.log("nodelist: ", display_node_list);
    return display_node_list;
}

const create_single_display = function (display_member = new DisplayQueueMember()) {

        let card_display_single_node = document.createElement("div");
        let card_deck_node = document.createElement("div");
        card_display_single_node.classList.add(VNS_tag);
        card_display_single_node.setAttribute("id", VNS_tag);
        card_deck_node.classList.add("row", "row-cols-1", "row-cols-sm-2", "row-cols-lg-3", "card-deck");
        card_display_single_node.appendChild(card_deck_node);

        display_member.appendTo(card_display_single_node, card_deck_node, vns_method_to_btn_name);
        return card_display_single_node;
}